<template>
  <!-- <div>商家 -- {{ $store.state.num }}</div> -->
  <div class="shop-box">
    <p>商家 -- {{ num }} -- {{ msg }}</p>
    <div class="content-msg">
      {{ shopInfo }}
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  created() {
    // console.log(this.$store.state.num)
    console.log(this.num)
  },
  computed: {
    ...mapState(['num', 'msg', 'shopInfo'])
  }
}
</script>

<style lang="less" scoped>
.shop-box {
  flex: 1;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}

.content-msg {
  white-space: pre-wrap;
}
</style>
